<template>
	<view class="pt30 pl10 pr10">
		<block v-for="(item,i) in list" :key='item.id'>
			<view class="flex mb20 bg-f pl20 pr20 pt20 pb20 radius16" @click="$jump(`/pages/shortVideo/follwVideoList?member_id=${item.member.id}`)" v-if="item.member">
				<!-- 左边的头像 -->
				<image :src="item.member.avatar" class="w90 h90 radius90 mr20"></image>
				<view class="flex1 flex row-between col-center">
					<view class="flex col-center">
						<text>{{item.member.name}}</text>
						<!-- <text>9个作品未看</text> -->
					</view>
					<view class="">
						<u-button size="mini" v-show="item.is_guanzhu" @click="guanzhuBtn(item)">已关注</u-button>
						<u-button size="mini" :custom-style="customStyle" v-show="!item.is_guanzhu" @click="guanzhuBtn(item)">关注</u-button>
					</view>
				</view>
			</view>
		</block>
		
	</view>
</template>

<script>
	export default {
		onShow() {
			this.getGive_list()
		},
		data() {
			return {
				customStyle:{
					background:'#D23030',
					color:'#fff'
				},
				//查询参数
				page:1,
				size:20,
				list:[],
				// is_guanzhu:true
			};
		},
		methods:{
			async getGive_list(cd) {
				try{
					const res = await this.$api.give_list({page:this.page,size:this.size})
					console.log(res)
					res.data.forEach(item=>{
						item.is_guanzhu=true
					})
					cd? this.list=[...this.list,...res.data] : this.list=res.data
				}catch(e){
					//TODO handle the exception
				}
			},
			//关注或取消关注
			guanzhuBtn(item) {
				item.is_guanzhu=!item.is_guanzhu
				this.$api.videoFollow({shop_id:item.shop_id}).then(res=>{
					console.log(res)
					this.$msg(res.msg)
					// this.getGive_list()
				})
			}
		},
		onReachBottom() {
			this.page++
			this.this.getGive_list('cd')
		}
	}
</script>

<style lang="scss">
page{
	// background-color: #FFFFFF;
}
</style>
